<template>
    <div>
        生命周期组件
        <button @click="bol = !bol">点击</button>
        {{ bol }}
    </div>
</template>

<script>
import { ref, 
    onBeforeMount, onMounted, 
    onBeforeUpdate, onUpdated, 
    onBeforeUnmount, onUnmounted 
} from 'vue'

export default {
    name: 'Study_lifecycle',
    setup(props, contxt) {
        console.log('---setup---')
        let bol = ref(true)

        onBeforeMount(() => {console.log('===onBeforeMount===')})
        onMounted(() => {console.log('===onMounted---')})
        onBeforeUpdate(() => {console.log('===onBeforeUpdate---')})
        onUpdated(() => {console.log('===onUpdated---')})
        onBeforeUnmount(() => {console.log('===onBeforeUnmount---')})
        onUnmounted(() => {console.log('===onUnmounted---')})

        console.log('---setup end---')
        return {
            bol
        }
    },

    beforeCreate() {
        console.log('---beforeCreate---')
    },
    created() {
        console.log('---created---')
    },

    beforeMount() {
        console.log('---beforeMount---')
    },
    mounted() {
        console.log('---mounted---')
    },

    beforeUpdate() {
        console.log('---beforeUpdate---')
    },
    updated() {
        console.log('---updated---')
    },

    beforeUnmount() {
        console.log('---beforeUnmount---')
    },
    unmounted() {
        console.log('---unmounted---')
    }
}
</script>

<style>

</style>